﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title><%= title%></title>
    <link rel="SHORTCUT ICON" href="/img/html_head.png">
    <link rel="stylesheet" type="text/css" href="/css/home-blog.css">
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
    <!--加载meta IE兼容文件-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/js/axios.js"></script>
</head>

<body>
    <!--  页头  -->
    <%- include('../home/header.html') -%>

    <div class="content whisper-content leacots-content">
        <div class="cont w1000">
            <div class="whisper-list">
                <div class="item-box">
                    <div class="review-version">
                        <div class="form-box">
                            <img class="banner-img" src="/img/liuyan.jpg">
                            <div class="form">
                                <form class="layui-form" >
                                    <div class="layui-form-item layui-form-text">
                                        <div class="layui-input-block">
                                            <input type="hidden" id="leacots-id" name="leacots-id" value="">
                                            <textarea name="content" id="content" placeholder="既然来了，就说几句" class="layui-textarea textarea-input"></textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block" style="text-align: right;">
                                            <div class="layui-btn definite btn-leacots" style="display:none" id="btn_subbmit" lay-submit lay-filter="add">確定</div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="volume">
                            <span class="label-all-leacots">全部留言：</span>
                            <span id="msg_total"><%= count %>条</span>
                        </div>
                        <!-- 留言区域-->
                        <div class="list-cont" id="list-cont">
                            <% leacotsList.forEach(item => { %>
                                <div class="cont">
                                    <div class="img">
                                        <img src="<%= item.avatar %>" alt="">
                                    </div>
                                    <div class="text">
                                        <p class="tit">
                                            <span class="name"><%= item.nickname %></span>
                                            <span class="data"><%= item.create_time %></span>
                                        </p>
                                        <p class="ct"><%= item.content%></p>
                                    </div>
                                </div>
                            <% })%>
                        </div>
                    </div>
                </div>
            </div>
            <div id="demo" style="text-align: center;"></div>
        </div>
    </div>

    <!-- 页脚-->
    <%- include('../home/footer.html'); -%>

    <script type="text/javascript" src="/layui/layui.js"></script>

    <script type="text/javascript">
        // layui.config({
        //     base: '/js/util/'
        // }).use(['element', 'laypage', 'form', 'menu'], function () {
        //     laypage = layui.laypage, form = layui.form, mm = layui.mm, layer = layui.layer, $ = layui.jquery, laytpl = layui.laytpl;
        //
        //     var btn_subbmit = $("#btn_subbmit");
        //     //menu.init();
        //     var pageIndex = 1,
        //         pageSize = 10;
        //     form.on('submit(add)', function (data) {
        //         btn_subbmit.hide();
        //         mm.request({
        //             url: "/home/add-leacots.do",
        //             type: "POST",
        //             data: data.field,
        //             success: function (result, msg) {
        //                 btn_subbmit.show();
        //                 $("#content").val('');
        //                 layer.msg(msg);
        //                 init(pageIndex, pageSize);
        //             },
        //             error: function (error) {
        //                 btn_subbmit.show();
        //                 layer.msg(error);
        //             }
        //         });
        //         return false;
        //     });
        //     //初始化评论
        //     var init = function (i, s) {
        //         mm.request({
        //             url: "/home/leacots.html",
        //             data: {
        //                 "pageIndex": i,
        //                 "pageSize": s
        //             },
        //             success: function (data, msg) {
        //                 btn_subbmit.show();
        //                 $("#msg_total").html(data.pageTotal);
        //                 laypage.render({
        //                     elem: 'demo',
        //                     count: data.pageTotal,
        //                     limit: data.pageSize,
        //                     curr: data.pageIndex,
        //                     jump: paged
        //                 });
        //                 BindData(data.data);
        //             }
        //         });
        //     }
        //
        //     function BindData(data) {
        //         var arrdata = data || [];
        //         var getTpl = demoTest.innerHTML,
        //             view = document.getElementById('list-cont');
        //         laytpl(getTpl).render(arrdata, function (html) {
        //             view.innerHTML = html;
        //         });
        //     };
        //     var paged = function (obj, first) {
        //         if (!first) {
        //             init(obj.curr, obj.limit);
        //         }
        //     }
        //     init(pageIndex, pageSize);
        // });

        const textarea = document.querySelector(".textarea-input")
        const hiddenEl = document.querySelector("#leacots-id")
        const btnLeacots = document.querySelector(".btn-leacots")
        textarea.onchange = function () {
            btnLeacots.style.display = ""
        }

        btnLeacots.onclick = function () {
            if (textarea.value.trim() === ""){
                alert("留言内容不能为空!")
            } else if (hiddenEl.value === ""){ //新增
                const data = {
                    id:hiddenEl.value,
                    content:textarea.value,
                    userId:2,//留言人
                    createTime:new Date(),
                }
                const promise = request("/home/add-leacots.do","post",data)
                promise.then(res => {
                    console.log("res:",res)
                    const {data:{id}} = res.data
                    hiddenEl.value = id
                    data.id = id
                })
            } else { //更新
                const data = {
                    id:hiddenEl.value,
                    content:textarea.value,
                    userId:2,//留言人
                    createTime:new Date(),
                }
                const promise = request("/home/update-leacots.do","put",data)
                promise.then(res => {
                    console.log("res:",res)
                    const {data:{id}} = res.data
                    hiddenEl.value = id
                })
            }
        }
    </script>
</body>

</html>
